<template>
	<view class="page-fill">
		<!-- 搜索层 -->
		<search @search="searchbook"></search>
		<view class="tabBox">
			<view class="tabList">
				<view class="tabTit">作品频道：</view>
				<view class="tabTxt">
					<text class="txt" :class="{'active':workDirection==item.val}" @tap="changePd(item)" v-for="item in workDirectionList" :key="item.val">{{item.name}}</text>
				</view>
			</view>
			<view class="tabList">
				<view class="tabTit">作品分类：</view>
				<view class="tabTxt">
					<text class="txt" :class="{'active':catId===item.val}" @tap="catId=item.val,page=1,getbooklist()" v-for="item in cateList" :key="item.val">{{item.name}}</text>
				</view>
			</view>
			<view class="tabList">
				<view class="tabTit">是否完结：</view>
				<view class="tabTxt">
					<text class="txt" :class="{'active':bookStatus===item.val}" @tap="bookStatus=item.val,page=1,getbooklist()" v-for="item in bookStatusList" :key="item.val">{{item.name}}</text>
				</view>
			</view>
			<view class="tabList">
				<view class="tabTit">作品字数：</view>
				<view class="tabTxt">
					<text class="txt" :class="{'active':wordCountMax==item.val}" @tap="wordCountMax=item.val,page=1,getbooklist()" v-for="item in wordCountMaxList" :key="item.val">{{item.name}}</text>
				</view>
			</view>
			<view class="tabList">
				<view class="tabTit">更新时间：</view>
				<view class="tabTxt">
					<text class="txt" :class="{'active':updatePeriod==item.val}" @tap="updatePeriod=item.val,page=1,getbooklist()" v-for="item in updatePeriodList" :key="item.val">{{item.name}}</text>
				</view>
			</view>
			<view class="tabList">
				<view class="tabTit">排序方式：</view>
				<view class="tabTxt">
					<text class="txt" :class="{'active':sort==item.val}" @tap="sort=item.val,page=1,getbooklist()" v-for="item in sortList" :key="item.val">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="bookList">
			<view v-for="(item,index) in bookList" :key="index" class="book-item" @tap="gotobookdetail(item)">
				<himg class="book-img" :src="item.picUrl" errorSrc="https://images-cdn.shimo.im/H4AX9SIW6W4xGH0M/noimg.jpg__thumbnail"></himg>
				<view class="book-info">
					<view class="book-title ellipsis">{{item.bookName}}</view>
					<view class="book-author ellipsis">{{item.authorName}} | {{item.catName}} | {{item.status==0?'连载':'完结'}}</view>
					<view >
						<p v-html="item.bookDesc" class="book-desp ellipsis2"></p>
					</view>
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
	import search from '@/components/search/search.vue'

	export default {
		data() {
			return {
				page:1,
				pagesize:20,
				totalpages:0,
				bookList:[],
				workDirectionList:[
					{"name":"男频","val":0},
					{"name":"女频","val":1}
				],
				cateList:[
					{"name":"不限","val":''},
					{"name":"玄幻奇幻","val":1},
					{"name":"武侠仙侠","val":2},
					{"name":"都市言情","val":3},
					{"name":"历史军事","val":4},
					{"name":"科幻灵异","val":5},
					{"name":"网游竞技","val":6},
				],
				bookStatusList:[
					{"name":"不限","val":''},
					{"name":"连载中","val":0},
					{"name":"已完结","val":1},
				],
				wordCountMaxList:[
					{"name":"不限","val":''},
					{"name":"30万字以下","val":300000},
					{"name":"30-50万字","val":500000},
					{"name":"50-100万字","val":1000000},
					{"name":"100万字以上","val":1000001},
				],
				updatePeriodList:[
					{"name":"不限","val":''},
					{"name":"三日内","val":3},
					{"name":"七日内","val":7},
					{"name":"半月内","val":15},
					{"name":"一月内","val":30},
				],
				sortList:[
					{"name":"不限","val":''},
					{"name":"更新时间","val":"last_index_update_time"},
					{"name":"总字数","val":"word_count"},
					{"name":"点击量","val":"visit_count"},
				],
				workDirection: 0, //0男频1女频
				catId: '',  //作品分类
				bookStatus: '',  //0连载1已完结
				wordCountMax: '',  //作品字数
				updatePeriod: '',  //作品字数
				sort:''
			}
		},
		components: {
			search
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title:e.category
			});
			this.category = e.category;
			this.catId = e.catId || '';
			this.getbooklist();
		},
		onReachBottom() {
			if(this.page>this.totalpages)return;
			this.getbooklist();
		},
		methods: {
			changePd(item){
				this.workDirection = item.val;
				// 男频
				if(item.val==0){
					this.catId = '';
					this.cateList = [
						{"name":"不限","val":''},
						{"name":"玄幻奇幻","val":1},
						{"name":"武侠仙侠","val":2},
						{"name":"都市言情","val":3},
						{"name":"历史军事","val":4},
						{"name":"科幻灵异","val":5},
						{"name":"网游竞技","val":6},
					];
				}
				// 女频
				if(item.val==1){
					this.catId = '';
					this.cateList = [
						{"name":"不限","val":''},
						{"name":"女生频道","val":7},
					];
				}
				this.page = 1;
				this.getbooklist();
			},
			searchbook(e) {
				uni.navigateTo({
					url:'../search/search?searchkey='+e
				});
			},
			gotobookdetail(f){
				uni.navigateTo({
					url:'../bookdetail/bookdetail?fictionid='+f.id+'&title='+f.bookName
				})
			},
			getbooklist(){
				uni.showLoading({
					title:'加载中...'
				});
				var url = this.websiteUrl + '/book/searchByPage';
				var param ={
					curr: this.page,
					limit: this.pagesize,
					workDirection: this.workDirection,
					catId: this.catId,
					bookStatus: this.bookStatus,
					wordCountMax: this.wordCountMax==1000001?'':this.wordCountMax,
					wordCountMin: this.wordCountMax==1000001?1000000:'',
					updatePeriod: this.updatePeriod,
					sort: this.sort
				};
				this.webhttp(url,param,'GET').then(res=>{
					uni.hideLoading();
					if(res.code == 200){
						if(this.page==1) this.bookList = [];
						this.bookList = this.bookList.concat(res.data.list);
						this.totalpages = res.data.pages;
						this.page = this.page+1;
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/bookList.scss';
.tabBox{
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 24rpx;
	padding: 32rpx 24rpx;
	.tabList{
		display: flex;
		margin: 0 0 10rpx;
		.tabTit{
			width: 150rpx;
			font-size: 28rpx;
			color: #666666;
			line-height: 64rpx;	
		}
		.tabTxt{
			display: inline-block;
			flex: 1;
			line-height: 64rpx;
			font-size: 28rpx;
			color: #333;
			.txt{
				display: inline-block;
				padding: 0 24rpx;
				&.active{
					background: #FF836F;
					color: #fff;
					border-radius: 8rpx;
				}
			}
		}
	}
}
.bookList{
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 24rpx;
	padding: 24rpx;
}
</style>
